// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Customers from './components/Customers.vue'
import About from './components/About.vue'
import Add from './components/Add.vue'
import VueResource from 'vue-resource'
import Details from './components/Details.vue'
import Edit from './components/Edit.vue'
import Login from './components/Login.vue'
Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(VueResource)
/* eslint-disable no-new */
const router = new VueRouter ({
  mode:"history",
  base:__dirname,
  routes:[
 
    {
      path:"/",
      component:Customers
    },
    {
      path:"/about",
      component:About
    },
    {
      path:"/add",
      component:Add
    },
    {
      path:"/customer/:id",
      component: Details
    },
    {
      path:"/edit/:id",
      component: Edit
    },
    {
      path: '/login',
      component:Login

    }

  ]
})
new Vue({
  router,
  // el: '#app',
  // components: { App },
  template:`
    <div id="app">
        <nav class="navbar navbar-inverse">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img alt="用户管理系统" src=""></a>
          </div>
          <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li><router-link to="/">主页</router-link></li>
              <li><router-link to="/about">关于</router-link></li>
            </ul>
            <ul class="nav navbar-nav  navbar-right">
            
            <li><router-link to="/add">添加用户</router-link></li>
            <li><router-link to="/login"><span class="
            glyphicon glyphicon-sd-video"></span>登录/退出</router-link></li>
          </ul>
          </div>
        </div>
      </nav>

      <router-view></router-view>
    </div>
  `
}).$mount("#app")
